import React, { Component } from 'react'
// 对接收的数据props 进行类型校验
// 导入 类型包
import Pts from 'prop-types';
console.log('Pts', Pts);

export default class Son extends Component {
    // 方式1: 对参数类型进行校验
    static propTypes = {
        count: Pts.number.isRequired,  // 标记必传属性 isRequired 不能单独使用
        cattoonArr: Pts.array
    }

    // 方式1: 设置参数的默认值, 当有参数使用参数, 没有参数使用默认值
    // static defaultProps = {
    //     cattoonArr: [{
    //         id: 1,
    //         name: '熊大'
    //     }, {
    //         id: 2,
    //         name: '熊二'
    //     }]
    // }
    render() {
        // console.log('this', this.props.count);
        return (
            <div>
                <p>我是son组件--{this.props.count}</p>
                <ul>
                    {
                        this.props.cattoonArr.map((item, index) => {
                            return <li key={item.id}>{item.name}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

// 方式2: 给参数类型校验
Son.propTypes = {
    count: Pts.number.isRequired,  // 标记必传属性 isRequired 不能单独使用
    cattoonArr: Pts.array
}

// 方式2: 给参数设置默认值
Son.defaultProps = {
    cattoonArr: [{
        id: 1,
        name: '熊大'
    }, {
        id: 2,
        name: '熊二'
    }]
}